<!-- 智企服务 -->
<template>
    <div class="enterprise-serve">
        <div class="main-img">
            <img src="~/static/img/enterprise/main.jpg">
        </div>
        <div class="main-container cp-container">
            <el-row :gutter="20" class="row-top">
                <el-col :span="6" v-for="(item,index) in themeList" :key="index" >
                    <el-card :body-style="{ padding: '0px' }" shadow="hover" class="card" >
                        <nuxt-link :to="{name:'qiao-s',query:{mainId:101,id:item.itemId}}" >
                            <img :src="item.imgUrl"  class="image">
                            <div  class="text">{{item.name}}</div>
                        </nuxt-link>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="row-bottom" >
                <el-col :span="9">
                    <el-card shadow="hover" class="card">
                        <nuxt-link :to="{name:'qiao-s',query:{mainId:101,id:106}}" class="flex align-center" >
                            <img src="~/static/img/enterprise/finance.jpg"  class="image" >
                            <div  class="text">
                                财务管理
                            </div>
                        </nuxt-link>
                    </el-card>
                </el-col>
                <el-col :span="9">
                    <el-card shadow="hover" class="card">
                        <nuxt-link :to="{name:'qiao-s',query:{mainId:101,id:107}}" class="flex align-center" >
                            <img src="~/static/img/enterprise/learn.jpg"  class="image" >
                            <span  class="text">
                                教育培训
                            </span>
                        </nuxt-link>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="card ">
                        <nuxt-link to="/qiao/s"  class="flex align-center">
                            <img src="~/static/img/enterprise/more.jpg"  class="image last-img">
                            <span  class="text last-text">查看更多</span>
                        </nuxt-link>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
@Component({
    layout: 'community',
    head () {
        return {
            title: '智企服务-CIIP社群中心-建筑业交流平台'
        }
    }
})
export default class PageCommunityEnterprise extends Vue {
    themeList:any[]=[
        {name: '人力资源', imgUrl: require('~/static/img/enterprise/hr.jpg'), itemId: 102},
        {name: '法务风控', imgUrl: require('~/static/img/enterprise/law.jpg'), itemId: 103},
        {name: '企业营销', imgUrl: require('~/static/img/enterprise/marketing.jpg'), itemId: 104},
        {name: '协同办公', imgUrl: require('~/static/img/enterprise/work.jpg'), itemId: 105}]
}
</script>
<style lang='scss' scoped>
    .enterprise-serve{
        overflow: hidden;
        background: #F8F8F8;
        padding-bottom:158px;
        .main-img{
            position:relative;
            left:50%;
            margin-left:-960px;
            width:1920px;
            img{
                display: block;
            }
        }
        .main-container{
            margin: 40px auto 0;
            font-size: 20px;
            .row-top{
                margin-bottom: 20px;
                .image {
                    display: block;
                    margin: 40px auto 45px;
                }
                .text{
                    margin-bottom: 40px;
                    text-align: center;
                }
            }
            .row-bottom{
                .image{
                    margin: 15px 50px 15px 90px;
                }
                .last-img{
                    margin-left: 40px;
                    margin-right: 0;
                }
                .last-text{
                    font-size: 16px;
                    color: #666666;
                }
            }
            .card:hover{
                .text{
                    color: #11A9E8;
                }
            }
        }
    }
</style>
<style lang='scss'>
    .enterprise-serve{
        .el-card__body{
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            a{
                height: 100%;
                width: 100%;
                color: #333;
            }
        }
    }
</style>
